<template>
  <van-loading v-if="loading" class="loading" />
  <div class="article-container">
    <div class="cover">
      <img :src="article.image" :alt="article.title">
      <div class="title-bg">
        <div class="title">
          {{ article.title }}</div>
      </div>
    </div>
    <div class="article-title">
      {{ article.title }}
    </div>
    <div class="article" v-html="article.body"></div>
    <div class="bottom" v-if="!loading">
      <van-button type="primary" round @click="gotoZhihu">进入知乎查看相关讨论</van-button>
    </div>
    <tool-cmp :articleTitle="article.title" :articleImage="article.image" :shareContent="shareContent" />
  </div>
</template>
<script setup>
import { getDailyContent, getDailyExtra, getMathSvg } from "@/api/index.js"
import { extractContent, extractLink } from "@/tools/index.js"
import { ref, onMounted, computed, reactive } from "vue"
import { useRoute } from "vue-router"



const route = useRoute()
const loading = ref(true)
const articleId = computed(() => route.params.articleId)
const article = reactive({
  id: "",
  title: "",
  body: "",
  css: "",
  image: '',
  images: [],
  url: '',
  link: '',
})



const applyCssToPage = () => {
  const linkElement = document.createElement('link');
  linkElement.rel = 'stylesheet';
  linkElement.href = article.css
  document.head.appendChild(linkElement);
}
onMounted(async () => {
  const response = await getDailyContent(articleId.value)
  article.css = response.story.css;
  applyCssToPage()
  article.id = response.story.id;
  article.title = response.story.title;
  // article.body = response.story.body;
  article.body = extractContent(response.story.body)
  article.link = extractLink(response.story.body)
  article.image = response.story.image;
  article.images = response.story.images;
  article.url = response.story.url;
  loading.value = false;
});
const gotoZhihu = () => {
  window.open(article.link, '_blank');
};
</script>
<style scoped>
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cover {
  position: relative;
  width: 100%;
  /* height: 350px; */
  background-size: cover;
  overflow: hidden;
  object-fit: cover;
}

.cover img {
  width: 100%;
}

.cover .title-bg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  /* backdrop-filter: blur(10px);
  background: rgba(0, 0, 0, 0.3);
  mix-blend-mode: overlay; */
}

.cover .title {
  position: relative;
  margin-bottom: 25px;
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  padding: 0 15px;
}

.article-title {
  font-size: 18px;
  color: #000;
  font-weight: 600;
  padding: 20px 20px 0 20px;
}

.article {
  padding: 20px 20px 0 20px;
  overflow-wrap: break-word;
}

.bottom {
  width: 100%;
  text-align: center;
  margin-bottom: 60px;
}

:deep(.van-button) {
  width: 90%;
  text-align: center;
}
</style>
